<template>
  <div style="display: flex;flex-direction: column;width: 100%;">
    <div style="height: 60px;display: flex;align-items: center;justify-content: center;width: 100%;">
      <el-alert
          title="提示"
          description="选择相应的项目分类、业务分类后，可查看到对应的规范"
          type="info"
          show-icon/>
    </div>

    <div style="display: flex;align-items:center;margin-top: 2%">
      <!--   项目分类   -->
      <el-form :model="data.industry">
        <el-form-item style="margin-left: 50px;" label-width="80" label="项目分类">
          <el-select v-model="data.selectIndustryId" placeholder="请选择项目分类" style="width: 20vw" @change="LoadDomain">
            <el-option
                v-for="item in data.industry"
                :key="item.industryId"
                :label="item.industryName"
                :value="item.industryId"
            >
              <span style="float: left">{{ item.industryName }}</span>
              <span
                  style="float: right; color: var(--el-text-color-secondary); font-size: 13px;"
              >{{ item.description }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!--业务分类-->
      <el-form :model="data.domain">
        <el-form-item style="margin-left: 50px;" label-width="80" label="业务分类">
          <el-select v-model="data.selectFieldId" placeholder="请选择业务分类" style="width: 20vw" @change="LoadSpec">
            <el-option
                v-for="item in data.domain"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId"
            >
              <span style="float: left">{{ item.fieldName }}</span>
              <span
                  style="float: right; color: var(--el-text-color-secondary); font-size: 13px;"
              >{{ item.description }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>


    <div style=" padding: 10px;height: 50vh;width: 100%;box-sizing: border-box">
      <el-table
          :data="data.Spec"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          border
          stripe
          style="width: 98%; border-radius: 5px;margin-left: 1%"
      >
        <el-table-column sortable prop="specName" width="250" label="规范名称"/>
        <el-table-column sortable prop="description" width="550" label="描述"/>
        <el-table-column sortable prop="creationTime" width="250" label="创建时间"/>
        <el-table-column sortable fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button link type="primary" @click="viewSpe(scope.row)" :icon="View">查看</el-button>
            <el-button link type="primary" @click="share(scope.row)" :icon="Promotion">分享</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!--  分页  -->
      <el-pagination
          v-model:current-page="data.currentPage"
          v-model:page-size="data.pageSize"
          :page-sizes="[10, 15, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 1%"
      ></el-pagination>
    </div>


    <el-dialog v-model="data.shareVisible" title="分享" width="500" center>
      <el-form label-width="150px" style="padding-right: 50px" :model="data.ShareForm">
        <el-form-item label="分享链接">
          <div style="display: flex">
            <el-input style="flex: 1" v-model="data.shareLink"></el-input>
            <el-button style="margin-left: 10px" type="primary" @click="copyLink(data.shareLink)">复制</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.shareVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import { Promotion, View} from '@element-plus/icons-vue'
import { reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  //当前页
  currentPage: 1,
  //每页多少条数据
  pageSize: 10,
  //数据条数
  total: 0,
  industry: [],
  selectIndustryId: null,
  domain: [],
  selectFieldId: null,
  Spec: [],
  selectSpecId: null,
  downLoad: false,
  filename: "",
  ShareForm: {},
  shareLink: '',
  shareVisible: false,
  shareSpeId:null,
  tableData:[]
})

//加载所有行业
const Load = () => {
  request.get(`/java/industry/category/getAll`)
      .then((response) => {
        console.log("项目类型数据：", response);
        data.industry = response.data.records;
      })
      .catch((error) => {
        console.error('请求发生错误:', error);
      })
};

Load()


//加载行业下的领域
const LoadDomain = () => {
  data.domain = []
  data.selectFieldId = null
  // 仅当选择了一个行业时才发起请求
  if (data.selectIndustryId) {
    request.get(`/java/field/category/getFiledByIndustryId?IndustryId=${data.selectIndustryId}`)
        .then((response) => {
          console.log("行业下领域数据：", response);
          data.domain = response.data;
        })
        .catch((error) => {
          console.error('请求发生错误:', error);
        })
  }
};


//加载领域下的规范
const LoadSpec = () => {
  data.Spec = []
  data.selectSpecId = null
  // 仅当选择了一个行业时才发起请求
  if (data.selectFieldId) {
    request.get(`/java/specification/getSpeByFieldCategoryId?fieldCategoryId=${data.selectFieldId}`)
        .then((response) => {
          console.log("领域下规范的数据：", response);
          data.Spec = response.data;
        })
        .catch((error) => {
          console.error('请求发生错误:', error);
        })
  }
};



const viewSpe = (row) => {
  location.href = '/view?specId=' + row.specId + '&specName=' + row.specName
}



const share = (row) => {
  data.ShareForm = JSON.parse(JSON.stringify(row));//将该行数据（多个字段）存入data.form
  data.shareLink = '';
  data.shareVisible = true;
  data.shareSpeId = row.specId;
  linkGeneration(row.specName)
}

//改变分页大小
const handleSizeChange = (pageSize) => {
  data.currentPage = 1
  data.pageSize = pageSize
  Load()
}

//去到第几页
const handleCurrentChange = (currentPage) => {
  data.currentPage = currentPage
  Load()
}

//生成分享链接
const linkGeneration = (specName) => {
  if (data.shareLink) {//有了链接，点确定不能再生成了
    data.shareVisible = false
    return;
  }
  let currentUrl = location.href.substring(0, location.href.indexOf('/inviteTendersFileSpecification'))
  data.shareLink = currentUrl + '/view?specId=' + data.shareSpeId + '&specName=' + specName
}

const copyLink = (link) => {
  let _input = document.createElement("input");   // 直接构建input
  _input.value = link;  // 设置内容
  document.body.appendChild(_input);    // 添加临时实例
  _input.select();   // 选择实例内容
  document.execCommand("Copy");   // 执行复制
  document.body.removeChild(_input)
  ElMessage.success("复制链接成功")
}

</script>

<style scoped>
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}
</style>